<template>
  <div>
    <van-field v-model="fieldVal" :label="label" :placeholder="placeholder" :rules="rules" :type="type" />
  </div>
</template>

<script>
export default {
  props: ['label', 'placeholder', 'type', 'rules', 'rule'],
  data() {
    return {
      fieldVal: '',
      isValid: true
    }
  },
  watch: {
    fieldVal(newVal) {
      const regExp = new RegExp(this.rule)

      this.isValid = regExp.test(newVal)

      this.$emit('valChanged', newVal)
    }
  }
}
</script>

<style lang="less" scoped></style>
